<script setup>
const scrollToBottom = () => {
  const startPosition = window.pageYOffset;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  const targetPosition = documentHeight - windowHeight;
  const distance = targetPosition - startPosition;
  const duration = 5000;
  let startTime = null;

  // 动画函数
  const animateScroll = (timestamp) => {
    if (!startTime) startTime = timestamp;
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
    
    // 使用缓动函数使滚动更平滑
    const ease = (t) => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1;
    window.scrollTo(0, startPosition + distance * ease(progress));
    
    if (progress < 1) {
      requestAnimationFrame(animateScroll);
    }
  };

  requestAnimationFrame(animateScroll);
};
</script>

<template>
  <div class="down-container" @click="scrollToBottom">
    <button class="learn-more">
      <span class="circle">
        <span class="icon arrow"></span>
      </span>
      <span class="button-text">{{ $t("learnMore") }}</span>
    </button>
  </div>
</template>

<style scoped>
.down-container {
  margin-top: 8px;
}

button.learn-more {
  position: relative;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  outline: none;
  border: 0;
  font-size: 1rem;
  text-decoration: none;
  background: transparent;
  width: 6.9rem;
  height: auto;
}

button.learn-more .circle {
  position: relative;
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--txcolor);
  border-radius: 1.5rem;
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

button.learn-more .circle .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: var(--bgcolor);
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

button.learn-more .circle .icon.arrow {
  left: 0.325rem;
  width: 0.888rem;
  height: 0.120rem;
  background: none;
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  transform-origin: center center;
}

button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.3rem;
  right: 0.05rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid var(--bgcolor);
  border-right: 0.125rem solid var(--bgcolor);
  transform: rotate(45deg);
}

button.learn-more .button-text {
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: var(--txcolor);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

button:hover .circle {
  width: 100%;
}

button:hover .circle .icon.arrow {
  background: var(--bgcolor);
  transform: translate(0, 1rem) rotate(90deg) translateX(-1rem);
  left: 1rem;
}

button:hover .button-text {
  color: var(--bgcolor);
}
</style>